<template>
  <div class="login">
    <header>
      <div class="logo"><img src="../../assets/images/logo.png" alt="" /></div>
      <ul class="hList">
        <li>用户协议</li>
        <li>隐私政策</li>
        <li>帮助中心</li>
        <li>|</li>
        <li>中文(简体) ▼</li>
      </ul>
    </header>
    <div class="content">
      <div class="c">
        <p class="cHead">
          <span @click="login()" :class="{ active: loginflag }">登录</span>
          <span class="cHlastspan" @click="reg()" :class="{ active: regflag }"
            >注册</span
          >
        </p>
        <div v-if="loginflag">
          <p>
            <input
              type="text"
              placeholder="邮箱/手机号码/小米ID"
              v-model="username"
            />
          </p>
          <p><input type="text" placeholder="密码" v-model="password" /></p>
        </div>
        <div v-else-if="regflag">
          <p>
            <input
              type="text"
              placeholder="请输入注册邮箱/手机号码/小米ID"
              v-model="username"
            />
          </p>
          <p>
            <input type="text" placeholder="请输入密码" v-model="password" />
          </p>
        </div>
        <button v-if="regflag" @click="regClick()">注册</button>
        <button v-else-if="loginflag" @click="loginClick()">登录</button>
        <p class="cFoot">
          <span>忘记密码?</span>
          <span>手机号登录</span>
        </p>
      </div>
    </div>
    <footer>
      <div class="f">
        <p>其他方式登录</p>
        <p class="fFoot">
          <img src="../../assets/images/qq.png" alt="" />
          <img src="../../assets/images/qq.png" alt="" />
          <img src="../../assets/images/qq.png" alt="" />
          <img src="../../assets/images/qq.png" alt="" />
        </p>
      </div>
    </footer>
  </div>
</template>
<script>
import { login, reg } from '../../api/login'
import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)

export default {
  data: () => ({
    loginflag: true,
    regflag: false,
    username: '',
    password: ''
  }),
  methods: {
    login() {
      this.loginflag = true
      this.regflag = false
    },
    reg() {
      this.regflag = true
      this.loginflag = false
    },
    async loginApi(data) {
      const res = await login(data)
      if (res.data.code === 0) {
        Toast.success('登陆成功')
        sessionStorage.user = JSON.stringify(data)
        setTimeout(() => {
          this.$router.push('/home')
        }, 800)
      } else {
        Toast.fail('登陆失败')
      }
    },
    async regApi(data) {
      const res = await reg(data)
      if (res.data.code === 200) {
        Toast.success('注册成功')
      } else {
        Toast.fail('注册失败')
      }
    },
    loginClick() {
      const data = {
        username: this.username,
        password: this.password
      }
      if (data.username === '' || data.password === '') {
        return Toast('账号或密码不能为空')
      }
      this.loginApi(data)
    },
    regClick() {
      const data = {
        username: this.username,
        password: this.password
      }
      if (data.username === '' || data.password === '') {
        return Toast('请填写注册信息')
      }
      this.regApi(data)
    }
  }
}
</script>
<style lang="less">
.login {
  padding: 0 20px 50px;
  .logo img {
    width: 164px;
    height: 44px;
    margin-left: 20px;
    margin-top: 20px;
  }
  .hList {
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    color: #9a9a9a;
    margin-top: 14px;
  }
  .content {
    height: 350px;
    background-image: "../../assets/images/erweima.png";
  }
  .c {
    height: 350px;
    margin: 0 auto;
  }
  .c .cHead {
    font-size: 24px;
    color: #9a9a9a;
  }
  .cHead .cHlastspan {
    margin-left: 24px;
  }
  .active {
    color: black;
    border-bottom: 6px solid red;
    border-radius: 4px;
  }
  .c p input {
    width: 100%;
    height: 66px;
    background-color: #f9f9f9;
    border: none;
  }
  .c button {
    width: 100%;
    height: 66px;
    background-color: #f9a270;
    border: none;
    color: white;
    font-size: 20px;
  }
  .c .cFoot {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: #ff5c00;
  }
  footer .f p {
    text-align: center;
    font-size: 16px;
    color: #9a9a9a;
  }
  .f .fFoot img {
    margin: 8px 12px;
  }
}
</style>
